// 角色管理
import { SearchOutlined, RedoOutlined } from '@ant-design/icons';
import { Button, Form, Input, Table, Pagination, Space, Modal, Checkbox, Row, Col } from 'antd';
import FormItem from 'antd/lib/form/FormItem';
import TextArea from 'antd/lib/input/TextArea';
import type { ColumnsType } from 'antd/lib/table';
import { useEffect, useState, FC, ReactNode } from 'react';
import http from '../../../utils/axios';
import { host2 } from '../../../utils/api';
import './index.css'
import { values } from '@antv/util';

interface DataType {
  roleCode: number
  roleExplain: string
  roleId: number
  roleName: string
  roleState: number
  roleUpdateLastTime: string
  userId: number

}
const AuthorityManagement: FC = () => {
  const selectname = (e: any) => {
    console.log(e);

    //将input的值给roleName


  }
  // 数据的渲染
  const [datas, setData] = useState()
  //  获取当前页数据的方法
  const getData = () => {
    http({
      url: host2 + `/shiro/role/select`,
      method: 'get',
      data: { roleName: '' }
    }).then((res) => {
      console.log(res.data.data);
      if (res.data.code == 200) {
        console.log('成功请求数据');
        setData(res.data.data)
      }
    }).catch((error) => {
      console.log(error);
    })
  }
  // 加载开始获取数据
  useEffect(() => { getData() }, [])

  // 头部查询和重置函数功能

  //重置
  const resetit = () => { }

  // 编辑的弹框函数
  const [isChanges, setIsChanges] = useState(false);
  const editshowModal = () => {
    setIsChanges(true);
    // console.log();


  };
  const changeOk = (values: any) => {
    setIsChanges(false);

    changeform.getFieldsValue();
    const role = changeform.getFieldsValue()
    // role.roleUpdateLastTime = '123123';
    // role.roleState = 0;
    console.log(role);
    http({
      url: host2 + '/shiro/role/update',
      method: 'post',
      data: { role }
    }).then((res) => {
      console.log(res.data);
    }).catch((error) => {
      console.log(error);
    })


  }
  const changeCancel = () => { setIsChanges(false); }

  // 新增的弹框弹框函数
  const [isModalVisible, setIsModalVisible] = useState(false);
  const addshowModal = () => {
    setIsModalVisible(true);
    console.log(addform.getFieldsValue());

  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };
  // 角色权限的弹框弹框函数
  const [isAdd, setIsAdd] = useState(false);
  const roleshowModal = () => {
    setIsAdd(true);
  };
  const addOk = () => { setIsAdd(false); }
  const addCancel = () => { setIsAdd(false); }

  // 删除
  const delItem = (id: number) => {
    console.log('删除');
    console.log(id);
    // http({
    //   url: '',
    //   method: 'post',
    //   data: id
    // }).then().catch()
  }
  // 文本域
  const { TextArea } = Input
  // ----创建表单实例----------------
  const [changeform] = Form.useForm();
  const [rolesform] = Form.useForm();
  const [headerfrom] = Form.useForm();
  const [addform] = Form.useForm();
  /*
roleCode: 101
roleExplain: "角色说明内容内容"
roleId: 1
roleName: "系统管理员"
roleState: 0
roleUpdateLastTime: "2022-06-29T10:33:42.000+0000"
userId: 1
  */
  //table的属性
  const columns: ColumnsType<DataType> = [
    {
      title: '序号',
      dataIndex: 'roleId',


    },
    {
      title: '角色代号',
      // className: 'column-money',
      dataIndex: 'roleCode',
      align: 'center',
    },
    {
      title: '角色名称',
      dataIndex: 'roleName',

    },
    {
      title: '角色说明',
      dataIndex: 'roleExplain',
      // render: text => <a>{text}</a>,
    },
    {
      title: '操作人',
      dataIndex: 'userId',

    },
    {
      title: '维护时间',
      dataIndex: 'roleUpdateLastTime',

    },
    {
      title: '操作',
      // dataIndex: 'address',  
      render: (_, record) => (
        <Space size="middle">
          <span onClick={() => {
            editshowModal();
            // console.log(record);
            changeform.setFieldsValue(record);
          }}  >编辑</span>
          <span onClick={() => {
            roleshowModal();
            rolesform.setFieldsValue(record);
          }}>角色权限</span>
          <span onClick={() => {
            // console.log(record);
            ;
            delItem(record.roleId);
          }}>删除</span>
        </Space>
      )
    },
  ];


  return (<div>
    {/* 头部查询，搜索 */}
    <Form form={headerfrom} layout="inline" className='btnStyel'>
      <Form.Item >角色名称:<Input className='inp' /></Form.Item>
      <Form.Item><Button icon={<SearchOutlined />} style={{ borderColor: 'rgb(2,167,240)', color: 'rgb(2,167,240)' }} onClick={selectname}>查询</Button></Form.Item>
      <Form.Item><Button icon={<RedoOutlined />} style={{ borderColor: 'rgb(245,154,35)', color: 'rgb(245,154,35)' }} onClick={resetit}>重置</Button></Form.Item>
    </Form>
    <div><Button style={{ margin: '0.25rem' }} type="primary" onClick={addshowModal}>+新增</Button></div>

    {/* 表格 */}
    <Table pagination={{
      showQuickJumper: true, defaultPageSize: 3,
      showTotal: (total, range) => `共 ${total} 条`, position: ["bottomCenter"]
    }}
      bordered
      scroll={{ x: 2500 }} columns={columns} dataSource={datas} rowKey={(record) => { return record.roleId }} />
    {/* <Table

      columns={columns}
      dataSource={datas}
      bordered
      pagination={false}
      rowKey={(record) => { return record.roleId }}
    // "roleId"
    /> */}

    {/* 分页 */}
    {/* <Pagination total={85} showSizeChanger showQuickJumper /> */}
    {/* showTotal={total => `总共 ${total}页`} */}

    {/* ------------------------------------------ */}
    {/* 新增的弹框 */}
    <Modal title="新增角色"
      visible={isModalVisible}
      onOk={(values) => {
        setIsModalVisible(false);
        console.log(values);
      }}
      onCancel={handleCancel} >
      <Form
        form={addform}
        labelCol={{ span: 4 }}
        wrapperCol={{ span: 18 }}
        layout="horizontal"
      >
        <Form.Item label="角色代号" name='roleCode' >
          <Input />
        </Form.Item>
        <Form.Item label="角色名称" name='roleName' >
          <Input />
        </Form.Item>
        <Form.Item label="角色描述" name='roleExplain'>
          <TextArea />
        </Form.Item>
      </Form>
    </Modal>
    {/* 编辑的弹框 */}
    <Modal title="修改" visible={isChanges} onOk={changeOk} onCancel={changeCancel} >
      <Form
        form={changeform}
        labelCol={{ span: 4 }}
        wrapperCol={{ span: 18 }}
        layout="horizontal"
      >
        <Form.Item label="序号" name='roleId'>
          <Input disabled />
        </Form.Item>
        <Form.Item label="操作人" name='userId'>
          <Input disabled />
        </Form.Item>
        <Form.Item label="角色代号" name='roleCode'>
          <Input />
        </Form.Item>
        <Form.Item label="角色名称" name='roleName'>
          <Input />
        </Form.Item>

        <Form.Item label="角色描述" name='roleExplain'>
          <TextArea />
        </Form.Item>

      </Form>
    </Modal>
    {/* 角色权限的弹框 */}
    <Modal title='角色权限' visible={isAdd} onOk={addOk} onCancel={addCancel}>
      <Form
        form={rolesform}
      >
        <Row>
          <Col>

            <Form.Item label=' 角色代号:' name='nameNumber'>

              <Input />
              {/* style={{ width: '30%', margin: '0 30px 10px 5px' }} */}
            </Form.Item></Col>
          <Col>
            <Form.Item label='角色名称:' name='name'>
              {/* :style={{ width: '30%', margin: '0 0 10px 5px' }} */}
              <Input />
            </Form.Item></Col>
        </Row>

        <Form.Item label='角色描述' name='address'
          wrapperCol={{ span: 19 }}
        >
          <TextArea></TextArea>
        </Form.Item>
        <Form.Item label='菜单权限'>
          <Checkbox.Group style={{ border: '1px solid balck', textAlign: 'center' }}>
            <Row>
              <Col span={8}>
                <Checkbox value="A" style={{ lineHeight: '32px' }}>
                  基础管理
                </Checkbox>
              </Col>
              <Col span={8}>
                <Checkbox value="B" style={{ lineHeight: '32px' }} >
                  定点信息
                </Checkbox>
              </Col>
              <Col span={8}>
                <Checkbox value="C" style={{ lineHeight: '32px' }}>
                  权限管理
                </Checkbox>
              </Col>
              <Col span={8}>
                <Checkbox value="D" style={{ lineHeight: '32px' }}>
                  物料派单
                </Checkbox>
              </Col>
              <Col span={8}>
                <Checkbox value="E" style={{ lineHeight: '32px' }}>
                  帮助中心
                </Checkbox>
              </Col>
              <Col span={8}>
                <Checkbox value="F" style={{ lineHeight: '32px' }}>
                  资产管理
                </Checkbox>
              </Col>
              <Col span={8}>
                <Checkbox value="G" style={{ lineHeight: '32px' }}>
                  质量监控
                </Checkbox>
              </Col>
              <Col span={8}>
                <Checkbox value="H" style={{ lineHeight: '32px' }}>
                  综合查询
                </Checkbox>
              </Col>
            </Row>
          </Checkbox.Group>
        </Form.Item>
      </Form>
    </Modal>
  </div>

  );
};
export default AuthorityManagement
